<!doctype html>
<!--
	作者：吴忠键
	时间：2018-04-20
	描述：答题结果页面
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/answer.css" rel="stylesheet" />
	</head>
	<body onload="go()">
		<script src="js/mui.min.js"></script>
		<script src="js/ip.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" href="answer.html"></a>
			<h1 class="mui-title" style="color: orange;">答题结果</h1>
		</header>
		<div class="answer-question">
			<div class="result" align="center">
				<!--
                	作者：吴忠键
                	时间：2018-04-20
                	描述：考试成绩 使用id来赋值,并且从这里获取值插入到历史成绩中作为数据
                -->
				<span id="score" class="score"></span>
				<span class="score">分</span>
			</div>
			<!--
            	作者：2524031199@qq.com
            	时间：2018-04-27
            	描述：根据分数，显示不同的图片和提示语
            -->
			<script>
				function go(){
					/*
					 * 获取页面answer页面传过来的分数值
					 */
					var score = localStorage.getItem('score');
					if(score == 100){
						document.getElementById("image-jpg").src = "images/very-good.jpg";
						document.getElementById("result-describe").innerText = "满分，您真棒！赞！赞！赞！";
					} else {
						if(score >= 80){
							document.getElementById("image-jpg").src = "images/good.jpg";
							document.getElementById("result-describe").innerText = "不错呦！继续保持！";
						} else {
							if(score >= 60) {
								document.getElementById("image-jpg").src = "images/strive.jpg";
								document.getElementById("result-describe").innerText = "您会更好！继续加油！";
							} else {
								document.getElementById("image-jpg").src = "images/bad.jpg";
								document.getElementById("result-describe").innerText = "别灰心！加倍努力哦！";
							}
						}
					}
					document.getElementById("score").innerText = score;
					localStorage.removeItem('score');
				}
			</script>
			<div class="result-image" align="center">
				<img id="image-jpg" class="image-size"/><br/><br/>
				<!--
                	作者：offline
                	时间：2018-04-20
                	描述：通过js判断分数区间，赋予不一样的文字描述
                -->
				<p id="result-describe" class="result-describe">满分，您真棒！赞赞赞！</p>
			</div>
			<div class="result-choice" align="center">
				<div class="choice">
					<ul class="ul">
						<li><button id="once-again" class="mui-btn mui-btn-warning">再做一次</button></li>
						<li><button id="continue-answer" class="mui-btn mui-btn-success">继续答题</button></li>
						<li><button id="error_question_look" class="mui-btn mui-btn-danger">错题查看</button></li>
					</ul>
				</div>
			</div>
		</div>
		<!--
        	作者：2524031199@qq.com
        	时间：2018-05-03
        	描述：三个按钮的监听事件
        -->
		<script>
			document.getElementById("once-again").addEventListener("tap",function(){
					mui.openWindow({
		        			url:'answer.html',
		        			id:'answer.html',
		        		});
			});
			document.getElementById("continue-answer").addEventListener("tap",function(){
					mui.openWindow({
		        			url:'class.html',
		        			id:'class.html',
		        		});
			});
			document.getElementById("error_question_look").addEventListener("tap",function(){
					mui.openWindow({
		        			url:'review_of_error.html',
		        			id:'review_of_error.html',
		        		});
			});
			
		</script>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#index">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">关于我们</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
</html>